<template>
  <!-- 左边第2个 设备统计分析    已改完-->
  <div class="wrapper">
    <div id="myChart3"></div>
  </div>
</template>

<script>
//    设备统计 分析
import { equipmentStatistics } from "@/api/demo.js";

export default {
  components: {},
  props: {},
  data() {
    return {
      options3: {
        textStyle: {
          fontFamily:"Microsoft YaHei",
          fontSize: 12,
          fontStyle: "normal",
          fontWeight: "normal"
        },
        color: ["#d75dff", "#00aeff", "#ffa235", "#1fc37f", "#008aff"],
        tooltip: {
          show: true,
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
          transitionDuration: 0,
        },

        legend: {
          show: false,
          bottom: "3%",
          // 修改小图标的大小
          itemWidth: 10,
          itemHeight: 10,
          // 修改图例组件的文字为 12px
          textStyle: {
            // color: "rgba(255,255,255, .3 )",
            color: "red",
            fontSize: "12",
          },
        },
        series: [
          {
            name: "设备统计",
            type: "pie",
            // 这个radius可以修改饼形图的大小
            // radius 第一个值是内圆的半径 第二个值是外圆的半径
            radius: ["40%", "60%"],
            center: ["50%", "55%"], //  调整 圆形位置
            avoidLabelOverlap: false,

            // 图形上的文字
            // label: {
            //   show: true,
            //   position: "center",
            // },
            // // 链接文字和图形的线是否显示
            // labelLine: {
            //     show: true
            // },

            //  设置文字颜色
            label: {
              show: true,
              position: "center",
              normal: {
                show: true,
                position: "outside",
                // textStyle: {
                //   color:'#ccc'
                // }
              },
              emphasis: {
                show: true,
                textStyle: {
                  // fontSize: "16",
                  // fontWeight: "bold",
                },
              },
            },
            labelLine: {
              // normal: {
              //   show: true,
              //   length: 10,
              //   length2: 10,
              //   lineStyle: {
              //     //color: '#066eab'
              //   },
              // },
            },
            data: [
              { value: 8, name: "办公/会议门禁", label: {textStyle: {fontSize: "10", color: "#d75dff"}} },
              { value: 3, name: "传感器", label: {textStyle: {fontSize: "10", color: "#00aeff"}} },
              { value: 4, name: "大门AI人脸", label: {textStyle: {fontSize: "10", color: "#ffa235"}} },
              { value: 4, name: "大门门禁", label: {textStyle: {fontSize: "10", color: "#1fc37f"}} },
              { value: 3, name: "消防楼梯/机房门禁", label: {textStyle: {fontSize: "10", color: "#008aff"}} }
            ],
          },
        ],
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    async drawLine() {
      let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
      myChart3.setOption(this.options3);

      const { data: res } = await equipmentStatistics();
        console.log("获取设备异常的信息",res)
      if (res.code == 200) {
        // res.result   是一个数组    数量 和   名字

        var key1 = "value";
        var key2 = "name";
        var key3 = "color";

        var arr = res.result;
        for (var i = 0; i < arr.length; i++) {
          arr[i][key1] = arr[i].deviceNum;
          arr[i][key2] = arr[i].deviceName;
          delete arr[i].deviceNum;
          delete arr[i].deviceName;
        }
        console.log(key1,key2)
        console.log(arr,'设备统计分析'); //arr为属性改变后的数据

        myChart3.setOption({
          series: [{ data: arr }],
        });
      }

      window.addEventListener("resize", function () {
        myChart3.resize();
      });
    },
  },
  created() {},
  mounted() {
    this.drawLine();
  },
};
</script>
<style lang="scss" scoped>
#myChart3 {
  width: 98%;
  height: 83%;
  /* background-color: pink; */
}
</style>